<template>
  <view>
    <!--页面标题头begin-->
    <view class="smart-page-head">
      <view class="smart-page-head-title">button按钮</view>
    </view>
    <!--页面标题头end-->
    <view>
      <button type="primary">页面主操作 normal</button>
      <button class="btn" type="primary" :loading="isLoading" @click="btnSave">页面主操作 loading</button>
      <button type="warn">警告操作</button>
      <button type="primary" plain>页面次要操作</button>
      <button type="primary" plain="true">镂空按钮 plain</button>
      <button type="primary" size="mini" class="minbtn">mini按钮</button>
    </view>
  </view>
</template>
<script>
	export default {
	  data() {
	    return {
	      isLoading: false
	    }
	  },
	  methods: {
	    btnSave() {
	      this.isLoading = true;
	      uni.showLoading({
	        title: "数据加载中..."
	      });
	      setInterval(() => {
	        this.isLoading = false;
	        uni.hideLoading();
	      }, 5000)
	    }
	  }
	}
</script>

<style>
	/*表示当前页面所有button标签*/
	button {
		margin: 30upx;
	}
 
	.btn {
		margin: 10upx;
	}

	.minbutn {
		background-color: #4CD964;
		color: #333333;
		width: 200upx;
	}
</style>
